<template>
<bg-lay-out :hideTopBar="true" :hideMarginLeft="true" :widthSize="true" :hideMask="true">
      <div slot="main" class="textColor">
        <div class="pageBox">
            <div class="mapBox">
              <commerce-map :areaData="areaDatas" v-model="buy_items"></commerce-map>
            </div>
             <div class="dateBox dateMonth">
                <div v-if="timeAccuracy === '4005'" class="dateScope beginDateBox">
                  <el-date-picker
                    v-model="beginDate"
                    :clearable="false"
                    type="year"
                    placeholder="选择年">
                  </el-date-picker>
                </div>
                <div v-else class="dateScope beginDateBox">
                  <el-date-picker
                    v-model="beginDate"
                    type="month"
                    :clearable="false"
                    placeholder="选择月">
                  </el-date-picker>
                </div>
                <el-radio-group class="radioBtnBlue" @change="changeDate" v-model="timeAccuracy">
                  <el-radio-button label="4005">按年</el-radio-button>
                  <el-radio-button label="4003">按月</el-radio-button>
                </el-radio-group>
              </div>
            <div class="topLeftCon" style="left: 70px;top: 98px;">
              <chart-lay-out :showLine="false" style="margin-right:0px">
                  <span slot="title">库位使用状态</span>
                  <pie-chart slot="main" v-model="onStateData" :option="onStateOption"></pie-chart>
              </chart-lay-out>
            </div>
            <div class="row topCon" style="right: 40px;top: 98px;">
              <div class="item" style="width:909px">
                <chart-lay-out :showLine="false" >
                  <span slot="title">商家占库数</span>
                  <bar-chart slot="main" v-model="merchantInventoryArr" ></bar-chart>
                </chart-lay-out>
              </div>
                <div class="itemLine"></div>
              <div class="item" style="width:447px">
                <chart-lay-out :showLine="false" style="margin-right:0px">
                  <span slot="title">出库商家占比</span>
                  <pie-chart slot="main" v-model="merchantsOfArr" :option="merchantsOfOption"></pie-chart>
              </chart-lay-out>
              </div>
            </div>
            <div class="row topCon" style="left: 70px;top: 510px;">
              <div class="item" style="width:678px">
                <chart-lay-out :showLine="false" >
                  <span slot="title">库存商品分布</span>
                  <bar-chart slot="main" v-model="serviceConditionArr" :option="serviceConditionOption"></bar-chart>
                </chart-lay-out>
              </div>
                <div class="itemLine"></div>
              <div class="item" style="width:678px">
                <chart-lay-out :showLine="false" >
                  <span slot="title">仓库发单趋势</span>
                  <bar-line-charts slot="main" v-model="tradeTrend" :option="tradeTrendOption"></bar-line-charts>
              </chart-lay-out>
              </div>
            </div>
            <div class="topLeftCon" style="right: 40px;top: 510px;">
              <chart-lay-out :showLine="false" >
                  <span slot="title">单品出库量排名TOP10</span>
                  <div slot="main" style="margin-left:40px">
                    <div>
                      <table class="gridtable">
                        <tr>
                          <th class="firstColumn">排名</th>
                          <th class="secondColumn">商品名称</th>
                          <th class="thirdColumn">出库量</th>
                        </tr>
                      </table>
                    </div>
                    <div class="top10Scroll" style="height:230px">
                      <table class="gridtable">
                        <tr v-if="top5List.length >= 1" v-for="(item, index) in top5List" :key="index">
                          <td class="firstColumn boldFont">{{index+1}}</td>
                          <td class="secondColumn">{{item.name}}</td>
                          <td class="thirdColumn boldFont">{{item.value}}</td>
                        </tr>
                        <div v-else class="tableNoData">暂无数据</div>
                      </table>
                    </div>
                  </div>
              </chart-lay-out>
            </div>
            <div class="topLeftCon" style="right: 40px;top: 923px;">
              <chart-lay-out :showLine="false" style="margin-right:0">
                  <span slot="title">发货物流公司占比</span>
                  <pie-chart slot="main" v-model="shipmentsData" :option="merchantsOfOption"></pie-chart>
              </chart-lay-out>
            </div>
            <div class="mapCard">
              <chart-lay-out :showLine="false" >
                  <span slot="title">发货区域热度分布TOP10</span>
                  <div slot="main" style="margin-left:40px">
                    <div>
                      <table class="gridtable">
                        <tr>
                          <th class="dyFirstColumn">地域</th>
                          <th class="dySecondColumn">发单量</th>
                        </tr>
                      </table>
                    </div>
                    <div class="top10Scroll" style="height:210px">
                      <table class="gridtable">
                        <tr v-if="proportionList.length >= 1" v-for="(item, index) in proportionList" :key="index">
                          <td class="dyFirstColumn">{{item.name}}</td>
                          <td class="dySecondColumn flexTd">
                            <div v-if="item.value !== 0" class="progressBar" :style="{'width':item.value/proportionList[0].value*100+'%'}"></div>
                            <div v-else class="progressBar" style="width:0"></div>
                            <span class="flexTdLeft boldFont">{{item.value}}</span>
                          </td>
                        </tr>
                        <div v-else class="tableNoData">暂无数据</div>
                      </table>
                    </div>
                  </div>
              </chart-lay-out>
            </div>
            <div class="row bottomCon">
              <div class="item" style="width:906px">
                <chart-lay-out :showLine="false" >
                  <span slot="title">仓库出入库趋势</span>
                  <bar-charts slot="main"  v-model="warehouseTrendArr" :option="warehouseTrendOption"></bar-charts>
                </chart-lay-out>
              </div>
                <div class="itemLine"></div>
              <div class="item" style="width:906px">
                <chart-lay-out :showLine="false" >
                  <span slot="title">商家出入库趋势</span>
                  <bar-charts slot="main"  v-model="merchantTrendArr" :option="merchantTrendOption"></bar-charts>
              </chart-lay-out>
              </div>
            </div>
        </div>
      </div>
</bg-lay-out>
</template>
<script>
import commerceMap from "@/components/cyy/cloudWarehouseMap";
import bgLayOut from "@/components/bgLayOut";
import chartLayOut from "@/components/Charts/chartLayOut";
import ICountUp from "vue-countup-v2";
import pieChart from "@/components/Charts/pieChart";
import barChart from "@/components/Charts/barChart";
import barCharts from "@/components/Charts/barCharts";
import barLineCharts from "@/components/Charts/barLineCharts";
import {
  GetDataByTarget,
  GetDeliveryAreaHeat,
  GetDoubleDetailList,
  GetDataByDoubleTarget,
  GetDetailList
} from "@/api/cyy/cloudWarehouse";
export default {
  components: {
    bgLayOut,
    chartLayOut,
    ICountUp,
    commerceMap,
    pieChart,
    barChart,
    barCharts,
    barLineCharts
  },
  data() {
    return {
      areaDatas: [],
      tradeTrendOption: {
        xAxis: {
          axisLabel: {
            rotate: 45
          }
        },
        grid: {
          bottom: 90
        },
        unit: ["件", "%"]
      },
      formattingDate: "",
      beginDate: new Date(), // 开始日期
      lastYear: "",
      timeAccuracy: "4005", // 查询类型 4005按年  4003按月
      tradeTrend: [], // 仓库发单趋势
      warehouseTrendArr: [], // 仓库出入库趋势
      warehouseTrendOption: {
        grid: { left: "10%" },
        labelDefault: 1
      },
      merchantTrendArr: [], // 商家出入库趋势
      merchantTrendOption: { grid: { left: "10%" }, labelDefault: 1 },
      shipmentsData: [], // 发货物流公司占比
      serviceConditionArr: [], // 库存商品分布
      serviceConditionOption: { grid: { left: "15%" }},
      merchantsOfArr: [], // 出库商家占比
      merchantsOfOption: {
        center: ["55%", "50%", "45%", "50%"],
        legend: {
          bottom: 0
        },
        showLine: true,
        showLabel: true
      },
      merchantInventoryArr: [], // 商家占库数
      onStateOption: {
        center: ["52%", "50%", "48%", "50%"],
        showLine: true,
        showLabel: true,
        title: {
          text: "",
          subtext: ""
        }
      }, // 库位使用状态chartOption
      onStateData: [], // 库位使用状态
      buy_items: [],
      sell_all: 55555555,
      sell_nums: 5555,
      sell_Money: 222,
      startVal: 0,
      decimals: 0,
      duration: 2.5,
      options: {
        useEasing: true,
        useGrouping: true,
        separator: ",",
        decimal: ".",
        prefix: "",
        suffix: ""
      },
      top5List: [], // 单品出库量排名
      proportionList: [] // 发货区热度分布
    };
  },
  watch: {
    beginDate(newValue, oldValue) {
      this.formattingDateFun();
      this.fetchData();
    }
  },
  mounted() {
    this.formattingDateFun();
    this.fetchData();
  },
  methods: {
    // 判断时间状态
    formattingDateFun() {
      if (this.timeAccuracy === "4005") {
        this.$set(
          this,
          "formattingDate",
          this.beginDate.getFullYear() + "-01-01"
        );
        this.$set(
          this,
          "lastYear",
          this.beginDate.getFullYear() - 1 + "-01-01"
        );
      } else {
        this.$set(
          this,
          "formattingDate",
          this.beginDate.getFullYear() +
            "-" +
            (this.beginDate.getMonth() + 1) +
            "-01"
        );
        this.$set(
          this,
          "lastYear",
          this.beginDate.getFullYear() -
            1 +
            "-" +
            (this.beginDate.getMonth() + 1) +
            "-01"
        );
      }
    },
    // 改变时间状态
    changeDate() {
      this.formattingDateFun();
      this.fetchData();
    },
    // 仓库发单趋势
    async fetchTradeTrend() {
      try {
        const params2 = {
          startTime: this.lastYear,
          queryType: "32005",
          timeAccuracy: this.timeAccuracy
        };
        const params = {
          startTime: this.formattingDate,
          queryType: "32005",
          timeAccuracy: this.timeAccuracy
        };
        const data = [];
        const res = await GetDetailList(params);
        if (res.data.code === "0") {
          const resData = {
            type: "bar",
            name: "发单量",
            value: res.data.result,
            option: {}
          };
          data.push(resData);
        }
        const res2 = await GetDetailList(params2);
        if (res2.data.code === "0") {
          const resData2 = {
            type: "line",
            name: "环比",
            value: res2.data.result,
            option: {}
          };
          data.push(resData2);
        }
        this.$set(this, "tradeTrend", data);
      } catch (error) {
        console.log(error);
      }
    },
    // 商家出入库趋势
    async fetchMerchantTrendArr() {
      try {
        const params = {
          startTime: this.formattingDate,
          queryType: "32009",
          timeAccuracy: this.timeAccuracy
        };
        const res = await GetDataByDoubleTarget(params);
        if (res.data.code === "0") {
          const resData = res.data.result;
          this.$set(this, "merchantTrendArr", resData);
          
        }
      } catch (error) {
        console.log(error);
      }
    },
    // 仓库出入库趋势
    async fetchWarehouseTrendArr() {
      try {
        const params = {
          startTime: this.formattingDate,
          queryType: "32008",
          timeAccuracy: this.timeAccuracy
        };
        const res = await GetDoubleDetailList(params);
        if (res.data.code === "0") {
          const resData = res.data.result;
          this.$set(this, "warehouseTrendArr", resData);
        }
      } catch (error) {
        console.log(error);
      }
    },
    // 发货区热度分布
    async fetchProportionList() {
      try {
        const params = {
          startTime: this.formattingDate,
          timeAccuracy: this.timeAccuracy
        };
        const res = await GetDeliveryAreaHeat(params);
        if (res.data.code === "0") {
          this.$set(this, "areaDatas", res.data.result);
          const proportionList = res.data.result.slice(0, 10);
          this.$set(this, "proportionList", proportionList);
        }
      } catch (error) {
        console.log(error);
      }
    },
    // 单品出库量排名Top10
    async fetchTop5List() {
      try {
        const params = {
          startTime: this.formattingDate,
          timeAccuracy: this.timeAccuracy,
          queryType: "32006"
        };
        const res = await GetDataByTarget(params);
        if (res.data.code === "0") {
          const resData = res.data.result.list;
          this.$set(this, "top5List", resData);
        }
      } catch (error) {
        console.log(error);
      }
    },
    // 发货物流公司占比
    async fetchShipmentsData() {
      try {
        const params = {
          startTime: this.formattingDate,
          timeAccuracy: this.timeAccuracy,
          queryType: "32010"
        };
        const res = await GetDataByTarget(params);
        if (res.data.code === "0") {
          const resData = res.data.result.list;
          this.$set(this, "shipmentsData", resData);
        }
      } catch (error) {
        console.log(error);
      }
    },
    // 出库商家占比
    async fetchMerchantsOfArr() {
      try {
        const params = {
          startTime: this.formattingDate,
          timeAccuracy: this.timeAccuracy,
          queryType: "32003"
        };
        const res = await GetDataByTarget(params);
        if (res.data.code === "0") {
          const resData = res.data.result.list;
          this.$set(this, "merchantsOfArr", resData);
        }
      } catch (error) {
        console.log(error);
      }
    },
    // 库存商品分布
    async fetchServiceConditionArr() {
      try {
        const params = {
          queryType: "32004"
        };
        const res = await GetDataByTarget(params);
        if (res.data.code === "0") {
          const resData = res.data.result.list;
          this.$set(this, "serviceConditionArr", resData);
        }
      } catch (error) {
        console.log(error);
      }
    },
    // 商家占库数
    async fetchMerchantInventoryArr() {
      try {
        const params = {
          queryType: "32002"
        };
        const res = await GetDataByTarget(params);
        if (res.data.code === "0") {
          const resData = res.data.result.list;
          this.$set(this, "merchantInventoryArr", resData);
        }
      } catch (error) {
        console.log(error);
      }
    },
    // 库位使用状态
    async fetchOnStateData() {
      try {
        const params = {
          queryType: "32001"
        };
        const res = await GetDataByTarget(params);
        if (res.data.code === "0") {
          const resData = res.data.result.list;
          const total = res.data.result.total.toLocaleString();
          this.$set(this.onStateOption.title, "text", "库位总数");
          this.$set(this.onStateOption.title, "subtext", total);
          this.$set(this, "onStateData", resData);
        }
      } catch (error) {
        console.log(error);
      }
    },
    fetchData() {
      this.fetchOnStateData(); // 库位使用状态
      this.fetchMerchantInventoryArr(); // 商家占库数
      this.fetchMerchantsOfArr(); // 出库商家占比
      this.fetchServiceConditionArr(); // 库存商品分布
      this.fetchTop5List(); // top10
      this.fetchProportionList(); // 发货区热度分布
      this.fetchShipmentsData(); // 发货物流公司占比
      this.fetchWarehouseTrendArr(); // 仓库出入库趋势
      this.fetchMerchantTrendArr(); // 商家出入库趋势
      this.fetchTradeTrend(); // 仓库发单趋势
    }
  }
};
</script>
<style lang="scss">
@import "../../../../styles/element-ui/radioBtn/radioBtnBlue.scss";
@import "../../../../styles/element-ui/date/dateMonth.css"; // 月份选择
</style>
<style>
@import "../../../../styles/element-ui/select.css";
/* @import "../../../../styles/element-ui/date/dateScope.css"; */
</style>
<style scoped lang="scss">
@import "../../../../styles/base/_parameters";

.pageBox {
  position: relative;
  height: 1880px;
}
.selectCon {
  position: absolute;
  right: 10px;
  z-index: 100;
  width: 100px;
}
.bottomRightCon {
  position: absolute;
  right: 40px;
  top: 648px;
  width: 500px;
  height: 411px;
  @include moduleBg(bg_500x412);
}
.topLeftCon {
  position: absolute;
  width: 435px;
  height: 392px;
  @include moduleBg(bg_436x393);
}
.bottomLeftCon {
  position: absolute;
  left: 70px;
  top: 725px;
  width: 816px;
  height: 332px;
  @include moduleBg(bg_815x333);
}
.mapCard {
  position: absolute;
  left: 70px;
  top: 1054px;
  width: 436px;
  height: 358px;
  background: -webkit-linear-gradient(
    left,
    rgba(#000, 0.7),
    rgba(#000, 0.2)
  ); /* Safari 5.1 - 6.0 */
  background: -o-linear-gradient(
    right,
    rgba(#000, 0.7),
    rgba(#000, 0.2)
  ); /* Opera 11.1 - 12.0 */
  background: -moz-linear-gradient(
    right,
    rgba(#000, 0.7),
    rgba(#000, 0.2)
  ); /* Firefox 3.6 - 15 */
  background: linear-gradient(
    to right,
    rgba(#000, 0.7),
    rgba(#000, 0.2)
  ); /* 标准的语法 */
}
.topCon .item,
.bottomCon .item {
  height: 100%;
}
.topCon {
  position: absolute;
  width: 1356px;
  height: 392px;
  @include moduleBg(bg_1357x393);
}
.bottomCon {
  position: absolute;
  top: 1433px;
  left: 70px;
  width: 1812px;
  height: 392px;
  @include moduleBg(bg_1813x393);
}
.itemLine {
  width: 1px;
  height: 260px;
  background: rgba(#2ff0d2, 0.3);
}
.blodText {
  margin-left: 15px;
  font-size: 28px;
  vertical-align: sub;
}
.planChartItem {
  width: 50%;
  text-align: center;
}
.planChartItem .leftText {
  position: absolute;
  left: 17%;
  top: 23%;
}
.planChartItem .rightText {
  position: absolute;
  left: 64%;
  top: 23%;
}
.shipmentData {
  padding: 40px 0 0 40px;
}
.shipmentData .title {
  display: flex;
  align-items: center;
}
.row {
  display: flex;
  flex-direction: row;
  align-items: center;
}
.cyyOutViewLogo {
  position: absolute;
  top: 110px;
  width: 300px;
  height: 40px;
  right: 140px;
  z-index: 99;
}
.mapBox {
  /* background: cyan; */
  position: absolute;
  width: 1135px;
  height: 914px;
  left: 312px;
  top: 560px;
}
.boldFont {
  text-align: center;
}
.bg4Con {
  @include flex-dc-ic;
  @include absoluteAllSides;
  width: 100%;
  height: 1080px;
}
.topCon .text span {
  font-size: 15px;
  margin-left: 10px;
}
.topCon .text {
  font-size: 16px;
}
.topCon .item .number span {
  font-size: 40px;
  margin-bottom: 10px;
}
.flexItem {
  margin-top: 12px;
  justify-content: center;
  width: 33%;
}
.flexItem p:nth-of-type(2) {
  line-height: 1;
}
.positionICountUp {
  position: relative;
}
.downOrUp {
  position: absolute;
  display: inline-block;
  width: 12px;
  height: 12px;
  margin-left: 10px;
  bottom: 10px;
  right: -20px;
}
table.gridtable {
  font-size: 16px;
  color: white;
  width: 100%;
  height: 100%;
  overflow: scroll-y;
  margin-top: 20px;
}
table.gridtable th {
  padding: 8px;
  height: 40px;
  /* border-right: 1px solid rgba(#2ff0d2, 0.3) ; */
  /* background: rgba($color: #00d1ff, $alpha: 0.2); */
  background-color: rgba(#00d1ff, 0.2);
  color: #2ff0d2;
}
table.gridtable th:last-child {
  border-right: none;
}
table.gridtable td {
  height: 36px;
  padding: 8px;
  border-right: 1px solid rgba(#2ff0d2, 0.3);
  background-color: rgba(0, 0, 0, 0);
  color: #00d1ff;
}
table.gridtable td:last-child {
  border-right: none;
}
table.gridtable .firstColumn {
  width: 20%;
  text-align: center;
}
table.gridtable .secondColumn {
  width: 50%;
  text-align: left;
}
table.gridtable .thirdColumn {
  width: 30%;
  text-align: left;
}
table.gridtable .dyFirstColumn {
  width: 20%;
  text-align: center;
}
table.gridtable .dySecondColumn {
  text-align: left;
}
table.gridtable .dyThirdColumn {
  width: 25%;
  text-align: right;
}
table.gridtable .flexTd {
  display: flex;
  align-items: center;
  float: left;
  width: 100%;
}
.flexTdLeft {
  /* width: 20%; */
  display: inline-block;
  /* float: left; */
  text-align: right;
  margin-left: 10px;
}
/* .flexTdRight {
  width: 70%;
  display: inline-block;
} */
.progressBar {
  display: inline-block;
  height: 14px;
  background: -webkit-linear-gradient(
    left,
    #0c43fd,
    #00d1ff
  ); /* Safari 5.1 - 6.0 */
  background: -o-linear-gradient(
    right,
    #0c43fd,
    #00d1ff
  ); /* Opera 11.1 - 12.0 */
  background: -moz-linear-gradient(
    right,
    #0c43fd,
    #00d1ff
  ); /* Firefox 3.6 - 15 */
  background: linear-gradient(to right, #0c43fd, #00d1ff); /* 标准的语法 */
}
.top10Scroll {
  overflow-y: scroll;
}
.dateBox {
  display: flex;
  align-items: center;
  margin-top: 20px;
  margin-left: 70px;
}
.beginDateBox {
  display: inline-block;
  margin: 0px 20px;
}
.tableNoData {
  display: table-cell;
  padding-top: 20px;
  color: #ccc;
  text-align: center;
}
</style>